<script setup lang="tsx">
import { ref, onMounted } from 'vue'
import { orderOperateRecordsApi } from '@/api/order'
import { orderReturnOperateRecordsApi } from '@/api/orderReturn'

const { t } = useI18n()
const { currentRow } = defineProps({
  currentRow: {
    type: Object,
    default: () => null
  }
})

// 使用 ref 声明响应式变量 isExpanded
const isExpanded = ref(true)

// 切换展开/收起状态的方法
const togglePanel = () => {
  isExpanded.value = !isExpanded.value
}

// 定义 dataList 变量
const dataList = ref<any[]>([])

// 获取操作记录数据
const getData = async () => {
  try {
    let res: any

    // 根据当前页面路径判断是订单还是退货单
    const currentPath = window.location.pathname
    if (currentPath.includes('/orderReturn/')) {
      // 退货单页面
      res = await orderReturnOperateRecordsApi({
        returnorder_id: currentRow.id
      })
    } else {
      // 订单页面
      res = await orderOperateRecordsApi({
        order_id: currentRow.id,
        order_type: currentRow.isWholesal ? 'wholesal' : 'order'
      })
    }

    dataList.value = res.data.list || []
  } catch (e) {
    console.error('获取操作记录失败:', e)
    dataList.value = []
  }
}

// 组件挂载时获取数据
onMounted(() => {
  getData()
})
</script>

<template>
  <el-card shadow="always">
    <div @click="togglePanel" class="header cursor-pointer">
      <span>{{ t('order.operateRecord') }}</span>
      <el-icon v-if="isExpanded">
        <el-icon-arrow-down />
      </el-icon>
      <el-icon v-else>
        <el-icon-arrow-right />
      </el-icon>
    </div>
    <el-collapse-transition>
      <div v-show="isExpanded" class="w-full">
        <el-timeline class="timeline" v-if="dataList.length">
          <el-timeline-item
            class="w-100%"
            v-for="(group, index) in dataList"
            :key="index"
            type="primary"
          >
            <template #default>
              <div class="timeline-group">
                <div class="timeline-date">
                  <el-button type="text">
                    {{ group.operate }}
                  </el-button>
                </div>
                <div>
                  <el-card shadow="always" class="record-card">
                    <div class="card-body operate">
                      <div>
                        <div>
                          <span class="operate-name mr-8px">{{ group.content }}</span>
                        </div>
                        <div class="mt-6px">
                          <span class="mr-8px">{{ group.user_name }}</span>
                          <span class="mr-8px">{{ group.create_time }}</span>
                        </div>
                        <div class="mt-6px" v-if="group.order_type || group.order_no">
                          <span v-if="group.order_type" class="mr-8px">{{ group.order_type }}</span>
                          <span v-if="group.order_no" class="mr-8px">{{ group.order_no }}</span>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
            </template>
          </el-timeline-item>
        </el-timeline>
        <!-- 暂无数据显示 -->
        <el-empty v-else :image-size="100" description="暂无数据" />
      </div>
    </el-collapse-transition>
  </el-card>
</template>

<style scoped>
.header {
  display: flex;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 900;
  cursor: pointer;
  background-color: #f3f3f3;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;
}

.timeline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 20px;
}

.timeline-group {
  display: flex;
  flex-direction: column;
}

.timeline-date {
  margin-top: -5px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.operate-name {
  font-weight: bold; /* 加粗 */
  color: #000; /* 黑色字体 */
}

.operate {
  color: #999; /* 灰色字体 */
}
</style>
